import { Button, Checkbox, Form, Input, message } from 'antd';
import { useState } from 'react';
import { service } from '../../api/url.js'
import { useNavigate } from "react-router-dom";
import { useLocation } from 'react-router-dom';
import { getUrlSearch } from '../../utils/utils.js'
import CryptoJS from 'crypto-js'
import sha1 from 'sha1'
function Login(props) {
    const location = useLocation();
    const navigate  = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const [queryParams, setQueryParams] = useState(getUrlSearch(location.search))
    const success = (msg) => {
        messageApi.open({
            type: 'success',
            content: msg,
        });
    };
      
    const error = (msg) => {
        messageApi.open({
            type: 'error',
            content: msg,
        });
    };
    const onFinish = (values) => {
        let d = new Date().valueOf().toString()
        // 长度40
        console.log(d, sha1(d), sha1(sha1('123456') + d))
      const params = {
          k1: d + '',
          k2: d + 123456 + '',
          client_id: queryParams.client_id,
          return_url: queryParams.return_url,
          phone: CryptoJS.AES.encrypt(d.substr(0, 10) + values.phone, d.substr(0, 6)).toString(),
          password: CryptoJS.AES.encrypt(d.substr(0, 10) + sha1(values.password), d.substr(0, 6)).toString()
      }
      service.loginCertService(params).then(res => {
          if (res.data.status === 1) {
            success('登录成功，正在跳转...')
            console.log('res.data.data.return_url', res.data.data.return_url)
            window.open(res.data.data.return_url, '_self')
          } else {
              error(res.data.msg)
          }
      })
    };
    const onFinishFailed = (errorInfo) => {
      console.log('Failed:', errorInfo);
    };
    return (
        <div className="login">
            {contextHolder}
            <Form
                className="login-form"
                name="basic"
                labelCol={{
                  span: 8,
                }}
                wrapperCol={{
                  span: 16,
                }}
                style={{
                  maxWidth: 600,
                }}
                initialValues={{
                  remember: true,
                }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
              >
                <Form.Item
                  label="手机号："
                  name="phone"
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[
                    {
                      required: true,
                      message: '手机号不能为空!',
                      validateTrigger: ['onChange']
                    },
                    {
                        validator(_, value) {
                            var reg = /^1[3456789]\d{9}$/;
                            return value === '' || value === undefined || reg.test(value)  ? Promise.resolve() : Promise.reject('请输入正确的手机号')
                        },
                        validateTrigger: ['onBlur']
                    }
                  ]}
                >
                  <Input />
                </Form.Item>
              
                <Form.Item
                  label="密码："
                  name="password"
                  rules={[
                    {
                      required: true,
                      message: '请输入密码!',
                    },
                  ]}
                >
                  <Input.Password />
                </Form.Item>
                
                <Form.Item
                  wrapperCol={{
                    offset: 8,
                    span: 16,
                  }}
                >
                  <Button className="login-btn" type="primary" htmlType="submit">
                    登录
                  </Button>
                  <Button danger onClick={() => navigate('/register')}>
                    注册
                  </Button>
                </Form.Item>
              </Form>
        </div>
    )
}

export default Login